<template>
  <common-page title="航道区域管理">
    <avue-crud
      ref="crud"
      v-model="form"
      class="crud-table"
      :option="tableOption"
      :data="list"
      :page.sync="page"
      :search.sync="searchForm"
      :table-loading="loading"
      :header-cell-class-name="() => 'crud-table-head'"
      :cell-class-name="() => 'crud-cell'"
      @search-change="searchChange"
      @refresh-change="getList()"
      @hook:mounted="$ele.tableMount($refs.crud)"
      @hook:beforeDestroy="$ele.tableDestroy($refs.crud)"
      @current-change="currentChange"
      @size-change="handleSizeChange"
      @row-update="update"
      @row-save="create"
    >
      <template #menuLeft="{ size }">
        <el-button type="primary" icon="el-icon-plus" :size="size" @click="handleAdd">新增 </el-button>
      </template>
      <template #menu="{ size, row }">
        <el-button type="text" :size="size" @click="handleEdit(row)">编辑</el-button>
        <el-button type="text" :size="size" @click="handleDelete(row)">删除</el-button>
        <el-button type="text" :size="size" @click="handleModelConfig(row)">模型配置</el-button>
      </template>
      <template #searchMenu="{ size }">
        <el-button type="primary" :size="size" @click="searchChange">查 询 </el-button>
        <el-button type="primary" plain :size="size" @click="resetForm">重 置 </el-button>
      </template>
    </avue-crud>
    <ChannelAreaDialog ref="channelAreaDialogRef" @handleRefresh="handleRefresh" :areaTypeList="channelAreaTypeDict" />
    <ModelConfigDialog ref="modelConfigDialogRef" :modelArr="modelArr" />
  </common-page>
</template>

<script>
import { tableOption } from './tableOption'
import { getAreaPage, deleteArea, addArea, editArea, getSysAreaWarnModels } from '@/api/channelArea'
import { getDict } from '@/api/dict'
import ChannelAreaDialog from './ChannelAreaDialog'
import ModelConfigDialog from './ModelConfigDialog'
export default {
  components: {
    ChannelAreaDialog,
    ModelConfigDialog
  },
  data() {
    return {
      searchForm: {},
      isUpload: false,
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      list: [],
      loading: true,
      form: {},
      channelAreaTypeDict: [
        {
          value: 1,
          label: '一级水域'
        },
        {
          value: 2,
          label: '二级水域'
        },
        {
          value: 3,
          label: '监航水域'
        },
        {
          value: 4,
          label: '锚地'
        },
        {
          value: 5,
          label: '停泊区'
        },
        {
          value: 6,
          label: '限速区'
        },
        {
          value: 7,
          label: '禁限航区域'
        }
      ], // 水域类型
      modelArr: []
    }
  },
  computed: {
    tableOption() {
      return tableOption.call(this)
    },
    documentHeight() {
      return this.$store.state.app.documentClientHeight
    }
  },
  async created() {
    await this.getChannelAreaType()
    this.getList()
    this.getAreaWarnModels()
  },
  methods: {
    resetForm() {
      this.$refs.crud.searchReset()
      this.page.currentPage = 1
      this.getList()
    },
    getAreaWarnModels() {
      getSysAreaWarnModels().then((res) => {
        if (res.result && res.result.length > 0) {
          this.modelArr = res.result.map((val) => {
            return {
              label: val.warningModelName,
              value: val.warningModelCode
            }
          })
        }
        //this.$refs.modelConfigDialogRef.modelList = res.result
      })
    },
    async getChannelAreaType() {
      const { result } = await getDict('channel_area_type')
      if (result && result.length > 0) {
        this.channelAreaTypeDict = result.map((val) => {
          return {
            value: parseInt(val.value),
            label: val.lable
          }
        })
      }
    },
    getList() {
      this.loading = true
      getAreaPage({
        ...this.searchForm,
        pageNumber: this.page.currentPage,
        pageSize: this.page.pageSize
      })
        .then((res) => {
          this.list = res.result.records
          this.page.total = res.result.total
        })
        .catch((err) => {})
        .finally(() => {
          this.loading = false
          this.$refs.crud?.doLayout()
        })
    },
    currentChange(val) {
      this.page.currentPage = val
      this.getList()
      this.$refs.curd?.doLayout()
    },
    handleSizeChange(val) {
      this.page.pageSize = val
      this.getList()
      this.$refs.curd.doLayout()
    },
    searchChange(form, done) {
      this.page.currentPage = 1
      this.getList()
      done && done()
    },
    handleAdd() {
      //this.$refs.crud.rowAdd()
      this.$refs.channelAreaDialogRef.show()
    },
    handleEdit(row) {
      //this.$refs.crud.rowEdit(row)
      this.$refs.channelAreaDialogRef.show(row)
    },
    handleModelConfig(row) {
      this.$refs.modelConfigDialogRef.show(row)
    },
    handleDelete(row, index) {
      this.$confirm('您确定删除该条数据吗?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        deleteArea(row.id)
          .then(() => {
            this.getList()
            this.$message.success('删除成功')
          })
          .finally(() => {
            this.loading = false
          })
      })
    },
    handleRefresh() {
      this.getList()
    },
    create(row, done, loading) {
      addArea(row)
        .then(() => {
          this.getList()
          done()
          this.$message.success('新增成功')
        })
        .catch(() => {
          loading()
        })
    },
    update(row, index, done, loading) {
      if (!row.roleDesc) {
        row.roleDesc = ''
      }
      editArea(row)
        .then(() => {
          this.getList()
          done()
          this.$message.success('修改成功')
        })
        .catch(() => {
          loading()
        })
    }
  }
}
</script>
<style scoped lang="scss"></style>
